<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		body{padding:0;margin:0;}
			.div1{
				width:300px;
				height:300px;
				padding:20px;
				margin:30px;
				background:lightblue;
				border:1px solid #ddd;
			}
			#t1{
				margin:10px; 
				padding:5px ;
				 border:2px solid #eeeeee; 
				 width:100px; height:200px; 
				 overflow:scroll; 
				 cursor:pointer;
			}
			p,h2{
				text-align: center;
			}
			#body{width:1800px;overflow: scroll;}
		</style>
	</head>
	<body id="body">
		<p><button id="btn">至你好位置</button></p>
	<div id="div1" class="div1">
		300p x 300
		<div id="t1" style="" > 100 x 200</div>
	 	
	 </div>
	</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
	<h2>😁</h2>
	<h2>😄</h2>
	<h2>😄</h2>
	<h2>😁😁😁</h2>
	<h2>😁😁😁</h2>
	<h2>😄😄😄</h2>
	<h2>😄😄😄</h2>
	<h2>😄😄😄</h2>
	<h2>😄😄😄</h2>
	<h2>😄😄😄</h2>
	<p id="hello">你好啊</p>
	<p  id="ret"><button id="btn2">回到顶部</button></p>
	</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
	<h2>😁</h2>
	<h2>😄</h2>
	<h2>😄</h2>
	<h2>😁😁😁</h2>
	<h2>😁😁😁</h2>
	<h2>😄😄😄</h2>
	<h2>😄😄😄</h2>
	<h2>😄😄😄</h2>
	<h2>😄😄😄</h2>
	<h2>😄😄😄</h2>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script>	
		console.log("div1.offsetWidth="+div1.offsetWidth)
		console.log("div1.offsetHeight="+div1.offsetHeight)
		console.log("div1.offsetLeft="+div1.offsetLeft)
		console.log("t1.offsetWidth="+t1.offsetWidth)
		console.log("t1.offsetHeight="+t1.offsetHeight)
		console.log("t1.offsetLeft="+t1.offsetLeft)
		console.log("t1.scrollWidth="+t1.scrollWidth)
		console.log("body.scrollTop="+t1.scrollTop)
		console.log("return.scrollTop="+ret.scrollTop)
		$(document).scroll(function(){
//			console.log("body.scrollTop="+$('body').scrollTop())
			console.log("div1.offsetLeft="+div1.offsetLeft)
		})
		
		$("#btn").click(function(){
			$('body').animate({
//				background:#e4393c;
				scrollTop:$("#hello").offset().top
			},2000)
		})
		$("#btn2").click(function(){
			$('body').animate({
				scrollTop:$("#btn").offset().top
			},2000)
		})
		$(document).scroll(function(){
			if($("body").scrollTop() == 600){
				alert("到600啦")
			}
		})
	</script>
	</body>
</html>
